<script setup>
// import { useRouter } from 'vue-router';
import { getMyAllPosts, getPostComments } from '@/api/User'
import router from '@/router';
import useUserStore from '@/store/user';
import { onMounted, ref, watch } from 'vue';

// const router = useRouter();
const userStore = useUserStore();

const myPosts = ref([]);

// 文字转语音
const synth = window.speechSynthesis;
const msg = ref(new SpeechSynthesisUtterance());
const voices = window.speechSynthesis.getVoices();
const voice = voices[2];

const text = ref("");

const getMyPosts = async () => {
    const { data } = await getMyAllPosts(userStore.userInfo.userid);
    userStore.userInfo.postsList = data;
    myPosts.value = data;
}

onMounted(() => {
    getMyPosts();
})

const contentText = ref("");
const onChange = async (index) => {
    const postId = myPosts.value[index].postId;
    // 根据 postId
    const { code, data } = await getPostComments(postId);
    if (code === 1 && data.length !== 0) {
        contentText.value = "";
        // text.value = data.content;
        data.forEach((item) => {
            contentText.value += item.content + "\n";
            // console.log(item.content)
            // text.value = item.content;
        })
        text.value = contentText.value;
    } else if (data.length === 0) {
        text.value = "暂无回复";
    }
};



const playVoice = () => {
    handleSpeak(text.value); // 传入需要播放的文字
};

const handleSpeak = (text) => {
    if (voice) {
        msg.value.voice = voice;
    }
    msg.value.text = text; // 文字内容
    msg.value.lang = "zh-CN"; // 使用的语言：中文
    msg.value.volume = 10; // 声音音量：1
    msg.value.rate = 1; // 语速：1
    msg.value.pitch = 1; // 音高：1
    synth.speak(msg.value); // 播放
};

const handleStop = (e) => {
    msg.value.text = e;
    synth.cancel(msg.value);
};

// 使用 watch 监听 text 的变化，并在变化时重新创建 msg
watch(text, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        msg.value = new SpeechSynthesisUtterance(); // 重新创建 msg
        handleSpeak(newValue); // 播放新的文本
    }
}, { immediate: true });

// 在 onMounted 生命周期钩子中调用 playVoice 函数
onMounted(() => {
    playVoice();
});

</script>

<template>
    <section>
        <van-nav-bar title="视界共享" fixed placeholder safe-area-inset-top />
    </section>


    <van-empty v-if="myPosts.length === 0" image="error" description="暂未发表" />
    <van-swipe @change="onChange" @drag-start="handleStop" lazy-render v-else>
        <van-swipe-item v-for="(item) in myPosts" :key="item.postId">
            <img :src="item.imageUrl" class="swipe-img" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
    </van-swipe>

    <van-button block type="primary" class="my-post-btn" @click="router.go(-1)">返回</van-button>
</template>

<style scoped>

.my-post-btn {
    width: 90vw;
    margin: 20vh auto;
}

.swipe-img {
    width: 80vw;
    height: 50vh;
    padding: 10px 40px 0 40px;
    object-fit: cover;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
</style>